<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">  <!-- 以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。 -->  
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>登录</title>
	<style>
		header{
			width:100px;
			height:10px;
			position: relative;
		}
		header .logo{
			height:10px;
			position:relative;
		}
		header .logo img{
			width:50px;
			left:100px;
		}
		header .logo h1{
			font-size:3.3rem;
			color:#780;
			position: relative;
		}
		*{
			margin:0;
			padding: 0;
		}
		a{
			text-decoration: none;
		}
		input,button
		{
			background: transparent;
			border: none;
			outline: none;
		}
		body{
			height: 100vh;
			background: linear-gradient(#141e30,#243b55);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 16px;
			color: #03e9f4;
		}
		.loginBox {
			width: 400px;
			height: 364px;
			background: rgba(0,0,0,0.5);
			box-shadow: 0px 15px 25px 0 rgba(0,0,0,.6);
			padding: 40px;
			box-sizing: border-box;
		}
		h3 {
			text-align: center;
			color: #fff;
			margin-bottom: 30px;
		}
		.item{
			height: 45px;
			border-bottom:1px solid #fff;
			margin-bottom:40px;
			position: relative;
		}
		.item input{
			width: 100%;
			height: 100%;
			color: #fff;
			padding-top: 20px;
			box-sizing: border-box;
		}
		.item input:focus+label,.item input:valid+label{
			top:0px;
			font-size: 12px;

		}
		.item label{
			position: absolute;
			left: 0;
			top: 12px;
			transition: all 0.5s linear;
		}
		.btn{
			padding: 10px 20px;
			overflow: hidden;
			margin-top: 30px;
			color: #03e9f4;
			position: relative;
			text-transform: uppercase;
			letter-spacing: 2px;
		}
		.btn:hover{
			background: #03e9f4;
			border-radius:5px ;
			color: #fff;
			box-shadow: 0 0 5px #03e9f4,
						0 0 25px #03e9f4,
						0 0 50px #03e9f4,
						0 0 100px #03e9f4;
		}
		.btn>span{
			position: absolute;
		}
		.btn>span:nth-child(1){
			width: 100%;
			height:2px;
			background:-webkit-linear-gradient(left,transparent,#03e9f4);
			left: -100%;
			top:0px;
			animation: line1 1s linear infinite;
		}
		@keyframes line1 {
			50%,100%{
				left: 100%;
			}
		}
		.btn>span:nth-child(2){
			width:2px;
			height:100%;
			background:-webkit-linear-gradient(top,transparent,#03e9f4);
			right: 0%;
			top:-100%;
			animation: line2 1s 0.25s linear infinite;
		}
		@keyframes line2 {
			50%,100%{
				top: 100%;
			}
		}
		.btn>span:nth-child(3){
			width:100%;
			height:2px;
			background:-webkit-linear-gradient(left,#03e9f4,transparent);
			left: 100%;
			bottom: 0;
			animation: line3 1s 0.5s linear infinite;
		}
		@keyframes line3 {
			50%,100%{
				left:-100%;
			}
		}
		.btn>span:nth-child(4){
			width:2px;
			height:100%;
			background:-webkit-linear-gradient(top,#03e9f4,transparent);
			left: 0px;
			top:100%;
			animation: line4 1s 0.75s linear infinite;
		}
		@keyframes line4 {
			50%,100%{
				top:-100%;
			}
		}
	</style>
</head>
<body>
	<!--<header>
		<div class="logo">
			<img src="../images/logo1.png" alt="哈尔滨工业大学（威海）logo" >
			<h1 >教师预约管理系统</h1>
		</div>
	</header>--><!-- header结束 -->
	<div class="loginBox">
		<h3>哈尔滨工业大学(威海)教师预约系统</h3>
		<form action="login_php.php" method="post">
			<div class="item">
				<input type="text" name="login_num" required>
				<label for="">学号</label>
			</div>
			<div class="item">
				<input type="password" name="login_pwd" required>
				<label for="">密码</label>
			</div>
			<button class="btn">submit
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</button>
		</form>
	</div>
</body>
</html>